<template>
  <n-switch
    :value="modelValue"
    :size="option?.size"
    :disabled="option?.disabled"
    :loading="option?.loading"
    :round="option?.round"
    :rubber-band="option?.rubberBand"
    :checked-value="option?.checkedValue"
    :unchecked-value="option?.uncheckedValue"
    @update:value="(v) => (option?.onUpdate?.(v), $emit('update:modelValue', v))">
    <template #icon><component :is="option?.renderIcon" /></template>
    <template #checked><component :is="option?.renderChecked" /></template>
    <template #unchecked><component :is="option?.renderUnchecked" /></template>
    <template #checked-icon>
      <component :is="option?.renderCheckedIcon" />
    </template>
    <template #unchecked-icon>
      <component :is="option?.renderUncheckedIcon" />
    </template>
  </n-switch>
</template>

<script lang="ts" setup>
import { NSwitch } from "naive-ui";
import type { SwitchOption } from "../form-item-types";

defineProps<{ modelValue: any; option?: SwitchOption }>();
</script>
